<template>
  <div>
    <!-- 栅格系统：一行由24个span组成 -->
    <el-row>
      <el-col :span="12">
        <div ref="echartsDiv1" style="width:100%;height:600px"></div>
      </el-col>
      <el-col :span="12">
        <div ref="echartsDiv2" style="width:100%;height:600px"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
//vue渲染的页面中ref绑定的变量 可以接收到标签对象
const echartsDiv1 = ref({})
const echartsDiv2 = ref({})

onMounted(() => {
  //页面初始化完毕后   渲染页面中的标签

  // 使用echarts渲染页面中的指定标签
  var myChart = echarts.init(echartsDiv1.value)
  // echarts的配置
  var option = {
    title: {
      //标题
      text: 'echarts测试',
      subtext: 'echarts测试_subtitle',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
  // 使用option中的配置渲染绑定的标签
  myChart.setOption(option)

  //渲染一个柱形图
  /*
    后端接口需要返回的数据：
        1、标题
        2、日期列表
        3、值列表
        需要两组以上的数据：
            两个标题、一个日期列表、两个值列表
  */
  var myChart2 = echarts.init(echartsDiv2.value)
  var option2 = {
    title: {
      //标题：
      text: 'echarts测试-柱形图',
      left: 'center',
    },
    xAxis: {
      type: 'category',
      //订单统计 日期列表升序排列列表
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        //订单统计 日期列表升序排列 统计值的 列表
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
      },
    ],
  }

  myChart2.setOption(option2)
})
</script>
